<template>
  <div>
    你的购物车有如下商品:<br>
    <el-table :data="shopList" style="width: 100%" border="1">
      <el-table-column prop="productBean.name" label="商品名"  />
      <el-table-column prop="productBean.price" label="单价" />
      <el-table-column prop="productBean.producer" label="产地" />

      <el-table-column label="购买数量" >
        <template #default="scope">
          <el-input v-model="scope.row.buyNum" @blur="updateNum(scope.row)"></el-input>
        </template>
      </el-table-column>

      <el-table-column label="单项总价" >
        <template #default="scope">
          {{scope.row.productBean.price * scope.row.buyNum}}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="del(scope.row)">移除商品</el-button>
        </template>
      </el-table-column>

    </el-table>
    购物车总价:{{computPrice()}}<br>
    <el-button @click="$router.push('/shopIndex')">继续购物</el-button>
    <el-button @click="gotoAddOrder">结账</el-button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      shopList:[]
    }
  },methods:{
    showShop(){
      axios.get("/project/shoppingCart/showShop").then(resp=> {
          this.shopList=resp.data;
      });
    },
    del(shopObj){
      //取出购物车属性id，传给形参调用业务方法
      axios.get("/project/shoppingCart/remove",{params:{shopId:shopObj.id}}).then(resp=> {
        if(resp.data=="ok"){
          this.showShop();
        }
      });
    },
    updateNum(shopObj){
      axios.get("/project/shoppingCart/updateNum",{
        params:{
          shopId:shopObj.id,
          num:shopObj.buyNum
        }
      }).then(resp=> {
        if (resp.data != "ok") {
          alert("修改失败")
        }
      });
    },
    computPrice(){
      let total=0;
      this.shopList.forEach(n=>{
        total +=n.productBean.price*n.buyNum
      })
      return total;
    },
    gotoAddOrder(){
      sessionStorage.setItem("totalPrice",this.computPrice());
      this.$router.push("/shopAddOrder");
    }

  },created() {
    this.showShop();
  }
}
</script>

<style scoped>

</style>